<template>
  <div class="login-page">
    <div class="title">水老板の秘密基地</div>
    <van-form ref="ContractForm" label-width="4em">
      <van-cell-group class="mingyue-form-item">
        <van-field v-model="form.mobile" label="手机号：" />
      </van-cell-group>
      <van-cell-group class="mingyue-form-item">
        <van-field v-model="form.smsCode" label="验证码：">
          <template #button>
            <van-button size="mini" plain type="primary" :disabled="sendBtnDisabled" :loading="sendBtnLoading" @click="sendCode">{{ sendBtnText }}</van-button>
          </template>
        </van-field>
      </van-cell-group>
      <van-button type="primary" :loading="loginLoading" block class="login-btn" @click="login">登录</van-button>
    </van-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { apiSendCode } from '@/api/sms'
import { apiUserLogin } from '@/api/user'
import { showToast } from 'vant'
import store from '@/stores'
import { useRouter } from 'vue-router'
const router = useRouter()

const form = ref({
  mobile: '',
  smsCode: ''
})
const sendBtnText = ref('发送验证码')
const sendBtnLoading = ref(false)
const sendBtnDisabled = ref(false)
const loginLoading = ref(false)

const { setToken, setUserInfo } = store.user

const sendCode = async () => {
  if (form.value.mobile === '') {
    showToast({
      message: '请输入手机号',
      position: 'top'
    })
    return
  }
  sendBtnLoading.value = true
  sendBtnText.value = '发送中...'
  apiSendCode({
    mobile: form.value.mobile
  })
    .then((res) => {
      sendBtnDisabled.value = true
      sendBtnText.value = '60秒后重新发送'
      let time = 59
      const timer = setInterval(() => {
        sendBtnText.value = `${time}秒后重新发送`
        time--
        if (time === 0) {
          clearInterval(timer)
          sendBtnText.value = '发送验证码'
          sendBtnDisabled.value = false
        }
      }, 1000)
    })
    .catch((e) => {
      sendBtnText.value = '发送验证码'
    })
    .finally(() => {
      sendBtnLoading.value = false
    })
}

const login = async () => {
  if (form.value.mobile === '') {
    showToast({
      message: '请输入手机号',
      position: 'top'
    })
    return
  }
  if (form.value.smsCode === '') {
    showToast({
      message: '请输入验证码',
      position: 'top'
    })
    return
  }
  loginLoading.value = true
  apiUserLogin({
    mobile: form.value.mobile,
    smsCode: form.value.smsCode
  })
    .then((res) => {
      setToken(res.token)
      const { id, mobile, nickName, state } = res.user
      setUserInfo({
        id,
        mobile,
        nickName,
        state,
        type: 'user'
      })
      router.replace({
        path: '/index'
      })
    })
    .catch((e) => {
      form.value.smsCode = ''
    })
    .finally(() => {
      loginLoading.value = false
    })
}
</script>

<style lang="less" scoped>
.login-page {
  padding: 40% 15px 0;
  .title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
  }
  .mingyue-form-item {
    margin-bottom: 20px;
    :deep(.van-field__button) {
      display: flex;
    }
  }
  .login-btn {
    margin-top: 50px;
  }
}
</style>
